<!--
 * @Author: Sam
 * @Date: 2025-04-28 18:01:51
 * @LastEditTime: 2025-10-09 10:13:55
 * @LastEditors: Sam
-->

<script setup lang="ts">

import { Config, DataType, GISViewer } from 'gis-viewer';
import { onMounted, useTemplateRef } from 'vue';
import { ENVConfig } from '../configs/ENVConfig';
import { useApp } from '@/hooks/useApp';

const { getToken } = useApp();
const container = useTemplateRef('gisv');

onMounted(async () => {
	await getToken();

	//云端资源基础路径
	Config.API_BASE_URL = ENVConfig.API_BASE_URL;

	//创建实例
	const gisv = GISViewer.create(container.value!, {
		mapLayer: {
			type: DataType.TMS_IMAGERY,
			name: '全球默认影像',
			id: 'global_imagery',
			baseId: 'global_imagery',
			format: 'image/jpg',
			url: Config.DEFAULT_IMAGERY,
			maxLevel: 7,
			minLevel: 5,
		},
	});
	window.gisv = gisv;

	//全可通过 const gisv = await window.gisvDefer.promise 获取gisv示例，避免初始化的时序问题
	window.gisvDefer.resolve(window.gisv);
});

</script>

<style>
.loading{
	width:100%;
	height:100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left:0;
	top:0;
	font-size: 50px;
	color:#fff;
	z-index: 1000;
	background: rgba(0, 0, 0, 0.5);
}
</style>

<template>
	<div class="gisv" ref="gisv"></div>
</template>
